<template>
	<view class="container">
		<view class="title">反馈类型</view>
		<view class="block">
			<view class="item" :class="index2==index ? 'active':' '" v-for="(item,index) in priceList" :key="item.id" @click="clickitem(item,index)">
				<view>{{item.shenbi}}</view>
			</view>
		</view>
		<view class="title">反馈问题</view>
		<view class="Textarea">
			<u--textarea confirm-type="send" placeholderClass='textareas' v-model="problem" placeholder="请输入内容" border='none'>
			</u--textarea>
		
		</view>
		<view class="title">问题图片</view>
		<view class="title">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10">
			</u-upload>
		</view>
		<view class="title">联系姓名</view>
		<u-input placeholder="请输入姓名"></u-input>
		<view class="title">联系电话</view>
		<u-input placeholder="请输入电话"></u-input>
		<view class="btn">
			<u-button class="tj" type="primary" color='#F9773A' text="提交" @click='sub()'></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				priceList:[{
					id:1,
					shenbi:"功能建设"
				},{
					id:2,
					shenbi:"使用问题"
				}],
				index2:0,
				fileList1: [],
				problem:"",//要上传的问题描述
				image:"",//要上传的图片，是字符串
				type:""
			}
		},
		onShow() {
			this.problem=""
			this.fileList1=[]
			this.image=""
		},
		onLoad() {
			this.type=this.priceList[0].shenbi
		},
		methods: {
			clickitem(item,index){
				console.log(item,index);
				this.index2=index
				this.type=item.shenbi
				
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.replyForm.pics=this.fileList1.map(item=>item.url)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				
				console.log(this.fileList1)
				this.image=this.fileList1.map(item=>item.url)
				console.log(this.image,'image')
			},
			async uploadFilePromise(url) {
				console.log(url)
		
				 let res =await this.$uploadFile(url)
				 return res.data.url
			},
			async sub(){
			   
				if(!this.type){
					   this.$u.toast('请选择类型')
					   return
				   }
				   if(!this.problem){
				   	   this.$u.toast('请填写内容')
				   	   return
				      }
					  if(!this.image){
					  	   this.$u.toast('请上传图片')
					  	   return
					     }
				let pro={
					feedback_category:this.type,
					content:this.problem,
					images:this.image.join(',')
				}
				let res = await this.$request.feedback(pro)
				  uni.navigateTo({
				  	url:'/pagesB/customer/historyfeedback'
				  })
			}
			
		}
	}
</script>

<style lang="scss">
page {
		background-color: #ffffff;
	}
/deep/.u-input{
	width: 628rpx;
	height: 60rpx;
	border-radius: 25rpx;
	background-color:#F9F9F9;
	margin: 0 auto;
}	
	.title{
		margin: 54rpx 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 44rpx;
	}
	.Textarea {
		padding: 30rpx 20rpx;
		height: auto;
		width:646rpx;
		background-color: #fafafa;
		margin: 0 auto;
		border-radius: 26rpx;
	}

	/deep/.u-textarea {
		background-color: #fafafa;
	}
	.btn{
		
		padding: 100rpx 100rpx;
	.tj{
		border-radius: 100rpx;
	}
	}
	.block{
		width: 682rpx;
		height: auto;
		margin: 36rpx auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.item {
			width: 210rpx;
			height: 69rpx;
			background: #F5F5F5;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color:#333333;
			
			
			
		  text-align: center;

		margin-right:34rpx;
		margin-bottom: 34rpx;
	
		  view:last-child{
			  font-size: 32rpx;
			  font-family: PingFang SC-Medium, PingFang SC;
			  font-weight: 500;
			  line-height: 72rpx;
		  }
			
		}
	
		.active{
			color: #ffffff;
			background-color:#FE4030;
		}
	}
</style>
